<!-- 登录页面 -->
<template>
  <div class="container">
    <div class="bot">
      <div class="topic">breezeyi</div>

      <!-- 登录页面     -->
      <div class="app">
        <el-form
          class="centered-form"
          :model="form"
          ref="form"
          :rules="rules"
          label-width="80px"
          :inline="false"
        >
          <el-form-item
            label="账号:"
            style="margin: 20px; width: 300px"
          >
            <el-input
              type="text"
              class="input"
              v-model="form.name"
              placeholder="请输入账号"
              prefix-icon="el-icon-user-solid"
              maxlength="21"
              show-word-limit
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="密码:"
            style="margin-left: 20px; margin-bottom: 0px; width: 300px"
          >
            <el-input
              class="input"
              v-model="form.password"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
              maxlength="6"
              show-password
              clearable
            ></el-input>
            <span class="zhuce"
              >没有账号？马上
              <el-link
                @click="dialog = true"
                type="primary"
                >注册</el-link
              ></span
            >
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
              class="denglu"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-drawer
      title="注册"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
    >
      <div class="demo-drawer__content">
        <el-form :model="enrollform">
          <el-form-item
            label="注册邮箱号:"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="enrollform.name"
              autocomplete="off"
              clearable
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="密码:"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="enrollform.password"
              autocomplete="off"
              clearable
              show-password
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="再次确认密码:"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="enrollform.password01"
              autocomplete="off"
              clearable
              show-password
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="验证码:"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="enrollform.code"
              autocomplete="off"
              clearable
            >
            </el-input>
            <el-button
              type="success"
              style="width: 150px; margin: 10px"
              :disabled="cooldown > 0 || this.enrollform.name === ''"
              @click="startCooldown"
            >
              {{ cooldown > 0 ? `冷却中 (${cooldown}s)` : "获取验证码" }}
            </el-button>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button
            type="primary"
            @click="zhuceClose"
            >注册</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style>
  .topic {
    text-align: center;
    font-style: italic;
    font-size: clamp(2em, 8vmin, 20em);
    text-shadow: 0;
    color: #fff;
    padding: 0.5rem;
    cursor: pointer;
  }
  .container {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 97vw;
    height: 95vh;
    margin: 0;
    padding: 0;
    overflow: hidden; /* 隐藏溢出内容 */
    position: relative;
    background-image: url("@/assets/preview.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .app {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    margin: auto;
    position: relative;
    /* left: 50%; */
    border: 1px solid rgb(243, 235, 235);
    border-radius: 10px;
    height: 300px;
    width: 400px;
    background-color: rgba(201, 218, 219, 0.5);
  }
  /* .input{
  width: 100px;
  height: 50px;
} */
  .login {
    display: flex;
    top: 30px;
  }
  .centered-form {
    position: absolute;
    /* right: 0%; */
  }
  .zhuce {
    position: relative;
    right: -20%;
  }
  .denglu {
    width: 250px;
    height: 40px;
  }
  .prompt {
    position: fixed;
    margin: 0;
    padding: 0;
  }
  .demo-drawer__footer {
    display: flex;
    justify-content: center;
  }
  .demo-drawer__content {
    width: 300px;
  }
</style>

<script>
  import axios from "axios";
  export default {
    data() {
      return {
        longitude: "", //经度
        latitude: "", //维度
        cooldown: 0, // 初始冷却时间
        Captcha: false,
        formLabelWidth: "120px",
        input: "",
        form: {
          name: "",
          password: "",
        },
        enrollform: {
          name: "",
          password: "",
          password01: "",
          code: "",
        },
        rules: {},
        dialog: false,
        loading: false,
        usertoken: "",
      };
    },
    methods: {
      goBack() {
        // 在这里执行返回操作
        // 例如使用浏览器的 History API 进行返回
        window.history.back(); // 这会模拟点击浏览器的返回按钮，返回到上一个页面
      },
      onSubmit() {
        if (this.form.name !== "" && this.form.password !== "") {
          axios
            .post("/ordinary/login", {
              username: this.form.name,
              userpassword: this.form.password,
              where_the_user_logged_in: this.longitude + "," + this.latitude,
            })
            .then((response) => {
              console.log(response);
              if (response.data.codetype == 1) {
                this.$notify({
                  title: "成功",
                  message: "登录成功！",
                  type: "success",
                });
                this.usertoken = response.data.usertoken;
                this.dialog = false;
                this.$router.push({
                  name: "home",
                  params: { usertoken: this.usertoken },
                });
              }
              if (response.data.codetype == 2) {
                this.$notify.error({
                  title: "错误",
                  message: response.data.message,
                });
              }
            })
            .catch((error) => {
              // 请求失败处理
              this.$notify.error({
                title: "错误",
                message: "未知错误！",
              });
            });
          // this.$router.push({
          //   name: "home",
          //   params: { usertoken: this.usertoken },
          // });
        } else {
          this.$message({
            showClose: true,
            message: "请填写账号信息",
            type: "error",
          });
        }
      },
      zhuceClose() {
        if (
          this.enrollform.name !== "" &&
          this.enrollform.password !== "" &&
          this.enrollform.code !== "" &&
          this.enrollform.password01 !== ""
        ) {
          if (this.enrollform.password == this.enrollform.password01) {
            axios
              .post("/ordinary/enroll", {
                username: this.enrollform.name,
                userpassword: this.enrollform.password, // Assuming password is stored in 'password' property
                enrollverificationcode: this.enrollform.code,
                where_the_user_logged_in: this.longitude + "," + this.latitude,
              })
              .then((response) => {
                console.log(response);
                if (response.data.codetype == 1) {
                  this.$notify({
                    title: "成功",
                    message: "注册成功！",
                    type: "success",
                  });
                  this.usertoken = response.data.usertoken;
                  this.dialog = false;
                  this.$router.push({
                    name: "home",
                    params: { usertoken: this.usertoken },
                  });
                }
                if (response.data.codetype == 2) {
                  this.$notify.error({
                    title: "错误",
                    message: response.data.message,
                  });
                }
              })
              .catch((error) => {
                // 请求失败处理
                this.$notify.error({
                  title: "错误",
                  message: "未知错误！",
                });
              });
          } else {
            this.enrollform.password = "";
            this.enrollform.password01 = "";
            this.$notify.error({
              title: "错误",
              message: "两次密码不一致！",
            });
          }
        } else {
          this.$notify.error({
            title: "错误",
            message: "请填写完整的信息！",
          });
        }
      },

      handleClose(done) {
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {});
      },
      cancelForm() {
        this.loading = false;
        this.dialog = false;
        clearTimeout(this.timer);
      },
      startCooldown() {
        if (this.cooldown === 0) {
          this.cooldown = 60; // 设置冷却时间为60秒

          const interval = setInterval(() => {
            this.cooldown--;

            if (this.cooldown === 0) {
              clearInterval(interval); // 清除计时器
            }
          }, 1000);
        }
        axios
          .get("/ordinary/gomail", {
            params: {
              user: this.enrollform.name,
            },
          })
          .then((response) => {
            if (response.data.codetype == 3) {
              this.$notify.error({
                title: "错误",
                message: "请检查邮箱格式是否正确！",
              });
            }
            if (response.data.codetype == 1) {
              this.$notify({
                title: "成功",
                message: response.data.message,
                type: "success",
              });
            }
          })
          .catch((error) => {
            // 失败回调
            console.error("获取数据失败:", error);
            this.$notify.error({
              title: "错误",
              message: "系统错误，请稍后重试！",
            });
          });
      },
    },
    mounted() {
      // 获取用户地理位置
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            this.latitude = position.coords.latitude;
            this.longitude = position.coords.longitude;

            this.$notify({
              title: "成功",
              message: "地区获取成功！",
              type: "success",
            });
          },
          (error) => {
            this.$notify.error({
              title: "地区获取错误",
              message: "请打开地址定位！搜素栏右边第一个！",
            });
          }
        );
      } else {
        this.$notify.error({
          title: "地区获取错误",
          message: "浏览器不支持地理位置获取，请更换浏览器。",
        });
      }
    },
  };
</script>
